<template>
  <div class="main">
    <h2>main</h2>
    <!-- 直接访问状态 -->
    <p>当前计数: {{ counterStore.count }}</p>
    <!-- 使用获取器 -->
    <p>双倍计数: {{ counterStore.doubleCount }}</p>
    <!-- 调用动作 -->
    <button @click="counterStore.increment()">+1</button>
    <!-- 也可以直接修改 -->
    <button @click="counterStore.count--">-1</button>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/store/counter.ts'
// 在组件中获取 Store 实例
const counterStore = useCounterStore()
</script>

<style scoped>
.main {
  color: red;
}
</style>
